import React, { useEffect, useState } from 'react';
import { Container, Row, Col } from 'reactstrap';
import Link from 'next/link';
import Cart from "../../containers/Cart";

const TopBarXyc = () => {
    const [login, setLogin] = useState({
        "access_token": "",
        "email_adress": "",
        "user_group_id": "0",
        "deliver_adress": "",
        "nick_name": "",
        "user_guid": "",
        "zip_code": "",
        "token": "",
        "phone_number": ""
    });
    useEffect(() => {
        var log = localStorage.getItem("XYCLogin");
        console.log(log)
        if (log) {
            setLogin(JSON.parse(log));
        }
    }, [])
    const logOut = () => {
        localStorage.removeItem("XYCLogin");
    }
    return (
        <div id="topHeader" className={"topbar-common top-header-dark3"}>
            <Container>
                <Row>
                    <Col lg="6" style={{ alignContent: 'center' }}>
                        <div className="header-contact-common">
                            <span>Show Admin's message</span>
                        </div>
                    </Col>
                    <Col lg="6" className="text-right">
                        <ul className="header-dropdown">
                            <a className='top-bar-home' href='/'>Home</a>
                            {
                                login.user_group_id == '0' ?
                                    <>
                                        <a className='top-bar-order' href='/page/account/product-list'>Product</a>
                                        <a className='top-bar-order' href='/page/account/order-list'>Order</a>
                                    </>
                                    :
                                    (
                                        <>
                                            <a className='top-bar-order' href='/page/account/admin-product-list'>Product</a>
                                            <a className='top-bar-order' href='/page/account/admin-order-list'>Order</a>
                                            <a className='top-bar-order' href='/page/account/admin-user-list'>User</a>
                                        </>
                                    )
                            }
                            <Cart icon={""} layout={"right"} />
                            <li className="onhover-dropdown mobile-account" style={{ color: 'white' }}>
                                {localStorage.getItem("XYCLogin") ? (JSON.parse(localStorage.getItem("XYCLogin")).nick_name ? JSON.parse(localStorage.getItem("XYCLogin")).nick_name : 'New User') : ('Login')}
                                <ul className="onhover-show-div">
                                    {
                                        localStorage.getItem("XYCLogin") ?
                                            <>
                                                <li>
                                                    <Link href={`/page/account/profile`} >
                                                        <a>Profile</a>
                                                    </Link>
                                                </li>
                                                <li>
                                                    <Link href={`/page/account/login`} >
                                                        <a onClick={logOut}>Log Out</a>
                                                    </Link>
                                                </li>
                                            </>
                                            :
                                            <>
                                                <li>
                                                    <Link href={`/page/account/login`} >
                                                        <a>Login</a>
                                                    </Link>
                                                </li>
                                                <li>
                                                    <Link href={`/page/account/register`} >
                                                        <a>Register</a>
                                                    </Link>
                                                </li>
                                            </>
                                    }
                                </ul>
                            </li>
                        </ul>
                    </Col>
                </Row>
            </Container>
        </div>
    )
}

export default TopBarXyc;